.@{vc-prefix} {
  position: absolute;
  background-color: @vc-background-color;
  border: 1px solid @vc-border-color;
  border-radius: 4px;
  box-shadow: 2px 2px 8px 0px @vc-shadow-color;
  font-size: @vc-font-size;
  white-space: nowrap;
  line-height: 1;
  z-index: @vc-z-index;
  -webkit-tap-highlight-color: transparent;

  &-inner {
    padding: @vc-padding-vertical 0;
    margin: 0;
    list-style: none;
  }

  &-item {
    padding: @vc-padding-vertical @vc-item-padding-horizontal;
    line-height: 1;
    color: @vc-text-color;
    cursor: pointer;

    &--hover {
      color: @vc-hover-text-color;
      background-color: @vc-active-color;
    }

    &--disabled {
      color: rgba(@vc-text-color, 0.4);
      cursor: not-allowed;
    }
  }

  &-divider {
    height: 0;
    margin: @vc-padding-vertical 0;
    border-bottom: 1px solid @vc-border-color;
  }

  &-group {
    &__title {
      padding: @vc-padding-vertical @vc-item-padding-horizontal
        (@vc-padding-vertical / 2);
      color: rgba(@vc-text-color, 0.55);
      font-size: 60%;
    }

    &__menus {
      padding: 0 5px;
      margin: 0;
      list-style: none;

      .@{vc-prefix}-item {
        display: inline-block;
        padding: @vc-padding-vertical (@vc-item-padding-horizontal - 5);
      }
    }
  }

  &-submenu {
    position: relative;

    &__title {
      padding-right: @vc-item-padding-horizontal * 1.6;
    }

    &__menus {
      position: absolute;

      &--left {
        left: 0;
        transform: translateX(-100%);
      }

      &--right {
        right: 0;
        transform: translateX(100%);
      }

      &--top {
        top: -(@vc-padding-vertical) - 1;
      }

      &--bottom {
        bottom: -(@vc-padding-vertical) - 1;
      }
    }

    &__arrow {
      position: absolute;
      right: @vc-padding-vertical;
    }
  }
}
